import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

function Home() {
  return (
    <div className="home">
      home页面
    </div>
  )
}
function Product() {
  return (
    <div className="Product">
      Product页面
    </div>
  )
}
function Me() {
  return (
    <div className="Me">
      Me页面
    </div>
  )
}

class RouterCom extends React.Component {
  render() {
    return (
      <div>
        <Router>
          <Route path="/" exact component={() => (<div>首页</div>)}></Route>
          <Route path="/me" component={() => (<div>我的</div>)}></Route>
          <Route path="/product" component={() => (<div>生产</div>)}></Route>
        </Router>
        <br />
        <Router basename="/admin">
          <div className="navbar">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to="/me">个人中心</Link>
          </div>
          <Route path="/" exact component={Home}></Route>
          <Route path="/product" exact component={Product}></Route>
          <Route path="/me" exact component={Me}></Route>
        </Router>
      </div>
    )
  }
}

class ChildrenCom extends React.Component {
  render() {
    let Header, Footer
    this.props.children.forEach(item => {
      if (item.props["data_name"] === "header") {
        Header = item
      } else if (item.props["data_name"] === "footer") {
        Footer = item
      }
    })

    return (
      <div>
        <div>
          {Header}
        </div>
        <div className="body">

        </div>

        <div>
          {Footer}
        </div>
      </div>
    )
  }
}

class App extends React.Component {

  render() {
    return (
      <div className="con">
        <RouterCom />
        <ChildrenCom>
          <h2 data_name="header">
            我是头部插入内容
          </h2>
          <h2 data_name="footer">
            我是未部插入内容
          </h2>
        </ChildrenCom>
      </div>
    )
  }

}

export default App;
